    <!-- Modal -->
    <div class="modal fade" id="addencoder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title newtranscodejob" id="myModalLabel" data-i18n="newtranscodejob.Select Encoder Output"></h4>
                </div>
                <div class="modal-body">
                    <label class="newtranscodejob" data-i18n="newtranscodejob.Select Encoder Output Type"></label></br>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="encoderoutput" value="phone">
                            <span class="newtranscodejob" data-i18n="newtranscodejob.Phone"></span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="encoderoutput" value="pad">
                            <span class="newtranscodejob" data-i18n="newtranscodejob.Pad"></span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="encoderoutput" value="tv">
                            <span class="newtranscodejob" data-i18n="newtranscodejob.TV"></span>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="encoderoutput" value="hdtv"">
                            <span class="newtranscodejob" data-i18n="newtranscodejob.HDTV"></span>
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default newtranscodejob" data-dismiss="modal" data-i18n="newtranscodejob.Cancel"></button>
                    <button type="button" class="btn btn-primary newtranscodejob" id="addencoder-ok-btn" data-i18n="newtranscodejob.OK"></button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row newlivejob">
            <div class="panel panel-primary">
                <div class="panel-heading newtranscodejob" data-i18n="newtranscodejob.New Transcode Job"></div>
                <div class="panel-body" id="newtranscodejob_content">
                    <input type="file" id="files" name="files[]" multiple />
                    <output id="medialist"></output></br>
                    <!-- Button trigger modal -->
                    <button class="btn btn-default newtranscodejob" data-toggle="modal" data-target="#addencoder" data-i18n="newtranscodejob.Select Encoder Output"></button></br>
                    <output id="encoderoutputlist"></output></br>
                    <button class='btn btn-primary pull-right newtranscodejob' id='createjob' data-i18n='newtranscodejob.New Transcode Job'></button>
                </div>
            </div>
            <div id='new_transcode_job_holder'></div>
            <div id='transcode_job_holder' style="display: none;"></div>
            <div id='encoder_editor_holder' style="display: none;"></div>
        </div>
    </div>

    <script type="text/javascript">

    $ (document).ready (function () {
        /* load configure */
        $.get ("/admin/getconf", function (data) {
            if (data.result == "success") {
                Document.GstreamillConf.conf = data.data;
            } else {
                alert ("get configure failure: " + data.reason);
                return;
            }

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
                $(".newtranscodejob").i18n ();
            });

        });

        var file_list = [],
            encoders = [];

        $('#addencoder-ok-btn').click (function () {
            var ischecked = {'phone': false, 'pad': false, 'tv': false, 'hdtv': false};
            var checked = $('#encoderoutput:checked');
            for (var i = 0; i < checked.length; i++) {
                ischecked [checked[i].value] = true;
            }
            encoders = [];
            var encoders_list = [];
            for (key in ischecked) {
                if (ischecked[key]) {
                    $.ajax ({
                        type: "get",
                        url: "schemas/transcode_encoder_" + key + "_mp4.json",
                        dataType: "json",
                        async: false,
                        success: function (encoder) {
                            encoders.push (encoder);
                        }
                    });
                    encoders_list.push ('<li><strong>', key, '</strong></li>');
                }
            }
            document.getElementById ('encoderoutputlist').innerHTML = '<ul>' + encoders_list.join('') + '</ul>';
            $('#addencoder').modal('hide');
        });

        $("#files").change (function (evt) {
            var files = evt.target.files;
            var output = [];

            file_list = [];
            for (var i = 0, file; file = files[i]; i++) {
                output.push ('<li><strong>', escape (file.name), '</strong> (', file.type || 'n/a', ') - ',
                             file.size, ' bytes, last modified: ',
                             file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a',
                             '</li>');
                file_list.push (file.name);
            }
            document.getElementById ('medialist').innerHTML = '<ul>' + output.join('') + '</ul>';
        });

        $("#createjob").click (function () {
            $.getJSON ("/admin/schemas/transcode_source_decodebin.json", function (job) {
                var result = "";
                for (var i = 0, file; file = file_list[i]; i++) {
                    var name = file.replace(/(\.[^.]*)/, "");
                    job.name = name.replace(/( )/g, "");
                    job["log-path"] = Document.GstreamillConf.conf.transcoderoot + "/out/" + file + "/";
                    job.source.elements.filesrc.property.location = Document.GstreamillConf.conf.transcoderoot + "/in/" + file;
                    if (encoders.length === 0) {
                        alert ("Set encoder out!");
                        return;
                    }
                    for (var j = 0, encoder; encoder = encoders[j]; j++) {
                        var path = Document.GstreamillConf.conf.transcoderoot + "/out/" + file + "/",
                            bitrate = encoder.elements.x264enc.property.bitrate;
                            resolution = encoder.elements.videoscale.caps.replace (/video\/x-raw,width=(\d+),height=(\d+)/g, "$1x$2");
                        encoder.elements.filesink.property.location = path + resolution + "_" + bitrate + "bps.mp4";
                    }
                    job.encoders = encoders;
                    console.log (JSON.stringify(job, null, 2));
                    $.ajax ({
                        type: "post",
                        url: "/admin/start",
                        dataType: "json",
                        async: false,
                        data: JSON.stringify (job, null, 4),
                        success: function (response) {
                            if (response.result == "success") {
                                result += 'start ' + file + ' ' + response.result + '\n';
                                window.location.replace("joblist.html");
                            } else {
                                result += 'start ' + file + ' ' + response.result + ', ' + response.reason + '\n';
                            }
                        }
                    });
                }
                alert (result);
            });
        });

    });

    </script>
